<template>
  <n-modal
    v-model:show="visible"
    preset="card"
    :title="scenicData?.spot"
    size="huge"
    :bordered="false"
    :mask-closable="false"
  >
    <div class="model-container">
      <div class="list">
        <div class="title">热度</div>
        <div class="content">{{ scenicData.page_view }}</div>
      </div>
      <div class="list">
        <div class="title">地区</div>
        <div class="content">{{ scenicData.region }}</div>
      </div>
      <div class="list">
        <div class="title">地址</div>
        <div class="content">{{ scenicData.addr }}</div>
      </div>
      <div class="list">
        <div class="title">经纬度</div>
        <div class="content">{{ scenicData.lng }},{{ scenicData.lat }}</div>
      </div>
      <div class="list">
        <div class="title">类型</div>
        <div class="content">{{ SCENIC_TYPE[scenicData.type] }}</div>
      </div>
      <div class="list">
        <div class="title">官网</div>
        <div class="content">{{ scenicData.url }}</div>
      </div>
      <div class="list">
        <div class="title">电话</div>
        <div class="content">{{ scenicData.tel }}</div>
      </div>
      <div class="list">
        <div class="title">开放时间</div>
        <div class="content">{{ scenicData.open_time }}</div>
      </div>
      <div class="list">
        <div class="title">建议参观时长</div>
        <div class="content">{{ scenicData.visit_time }}</div>
      </div>
      <div class="list">
        <div class="title">图片</div>
        <div class="content">
          <n-image-group v-if="scenicData.scenic_img !== '-'">
            <n-space>
              <n-image
                v-for="img in scenicData.scenic_img"
                :key="img"
                :src="img"
                width="100"
              />
            </n-space>
          </n-image-group>
          <span v-else>-</span>
        </div>
      </div>
      <div class="list">
        <div class="title">描述</div>
        <div class="content">{{ scenicData.desc }}</div>
      </div>
      <div class="list">
        <div class="title">详情</div>
        <div class="content">{{ scenicData.detail }}</div>
      </div>
    </div>
  </n-modal>
</template>

<script setup lang="ts">
import { SCENIC_TYPE } from '@/constant'

const props = defineProps<{
  data: any
}>()

const visible = defineModel()

const scenicData = ref({})

watch(
  () => props.data,
  data => {
    scenicData.value = JSON.parse(JSON.stringify(data))
    for (const key in scenicData.value) {
      if (scenicData.value[key] === null) {
        scenicData.value[key] = '-'
      }
    }
  }
)
</script>

<style scoped lang="scss">
.list {
  display: flex;
  padding: 5px 0;

  .title {
    width: 100px;
    font-weight: bold;
  }

  .content {
    flex: 1;
  }
}
</style>
